<template>
  <f7-page class="home">
    <div class="banner">
      <img src="../img/home/banner.png" alt="" />
      <div class="title">
        <p>做任务赢福利</p>
        <p class="subtitle">现金积分等你拿</p>
      </div>
    </div>
    <qm-navigat-bar class="qm-navigat-bar" :data="navigatBar"></qm-navigat-bar>

    <qm-tabs swipeable animated class="tabs" line-width="calc(30px * var(--ratio))">
      <qm-tab title="生活播报">
        <qm-consult :data="data"></qm-consult>
      </qm-tab>
      <qm-tab title="今日动态">
        <qm-consult :data="data"></qm-consult>
      </qm-tab>
      <qm-tab title="企业动态">
        <qm-consult :data="data"></qm-consult>
      </qm-tab>
    </qm-tabs>

    <f7-viewbar-instince slot="fixed"></f7-viewbar-instince>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      navigatBar: [
        {
          image: "static/img/home/icon-home-fun1.svg",
          title: "随机巡查",
          href: "/business/index",
        },
        { image: "static/img/home/icon-home-fun2.svg", title: "巡查任务" },
        { image: "static/img/home/icon-home-fun3.svg", title: "巡查轨迹" },
        { image: "static/img/home/icon-home-fun4.svg", title: "任务派单" },
      ],
      data: [
        {
          image: "static/img/home/consult-1.png",
          title: "银行利率已经上调5%，将影响楼…",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-1.png",
          title: "天津市滨海新区8项指标成为全…",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-1.png",
          title: "开展照片征集活动通知",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-1.png",
          title: "疫情防控不放松 个人防护第一位 进一步做好预防",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-2.png",
          title: "天津市滨海新区13项指标成为全国标杆",
          time: "2022-03-16  12:00",
        },
      ],
    };
  },
  methods: {
  }
};
</script>

<style lang="less" scoped>
.home {
  .banner {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56%;

    .title {
      position: absolute;
      top: 50%;
      left: calc(32px * var(--ratio));
      transform: translateY(-50%);
      font-weight: 600;
      color: var(--color-text-base);
      font-size: calc(48px * var(--ratio));

      p {
        margin: 0;
      }

      .subtitle {
        font-weight: 400;
        font-size: var(--font-size-subcontent);
        opacity: 0.8;
      }
    }

    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  //   导航
  .qm-navigat-bar {
    margin-top: calc(-77px * var(--ratio));
  }

  //   工具栏
  .tabs {
    margin-top: calc(36px * var(--ratio));

    /deep/ .van-tabs__wrap {
      margin: 0 calc(32px * var(--ratio));
    }
  }

  //   咨询
}
</style>
